<template>
    <div class="main">
        <navTop v-if="scrWidth <= 768" :num="total"></navTop>
        <div class="cont">
            <div class="top">
                <span>职位筛选</span>
                <el-input placeholder="输入职位关键字" @input="reqList" v-model="keywords" @change="reqList">
                    <template slot="append">
                        <el-button type="info" class="search" @click="reqList">搜索职位</el-button>
                        <el-button @click="drawer = true" class="sx" type="info">筛选 <img src="@/assets/img/sear.svg"
                                alt=""></el-button>
                    </template>
                </el-input>
                <div class="select">
                    <el-select filterable v-model="place_id" placeholder="工作地点" :clearable="true" @change="getPlace">
                        <el-option v-for="item in place" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>

                    <el-select filterable v-model="cate_id" collapse-tags style="margin-left: 20px;" :clearable="true"
                        placeholder="职能类型" @change="getCate">
                        <el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select filterable v-model="dept_id" style="margin-left: 20px;" placeholder="部门"
                        :clearable="true" @change="getDept">
                        <el-option v-for="item in dept" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="bottom">
                <a class="info" :href="getHref({ path: '/jobInfo', query: { id: item.id } })"
                    @click.prevent="goPage('/jobInfo', item.id)" v-for="(item, index) in list" :key="index">
                    <div class="title">
                        <span class="ug" v-if="item.is_rush == 1">急</span>
                        <span class="name">{{ item.name }}</span>
                    </div>
                    <div class="type">
                        <span>{{ item.dept_name }}</span>|
                        <span>{{ item.cate_name }}</span>
                    </div>
                    <div class="state">
                        <span>{{ item.place_name }}</span>
                        <span>发布时间：{{ item.time }}</span>
                    </div>
                </a>
                <el-empty style="margin:0 auto" description="尚无任何相关职位" v-if="list.length == 0"></el-empty>

            </div>
            <div class="pagination" v-if="list.length > 0 && scrWidth > 768">
                <el-pagination :current-page.sync="currentPage" background layout="prev, pager, next" :total="total"
                    :page-size="10" @current-change="getChange">
                </el-pagination>
            </div>
        </div>

        <el-drawer :visible.sync="drawer" direction="rtl" :withHeader="false" size="88%">
            <div class="drawer">
                <div class="chose">
                    <p>工作地点 <span @click="more = '工作地点'" v-if="place.length > 9">更多<i
                                class="el-icon-arrow-right"></i></span></p>
                    <div class="name">
                        <span class="line1" @click="getPlace2(item.id)" :class="{ active: item.id == place_id }"
                            v-show="index < 9" v-for="(item, index) in place" :key="item.id">
                            {{ item.name }}
                        </span>
                    </div>
                </div>
                <div class="chose">
                    <p>职能类型<span @click="more = '职能类型'" v-if="cate.length > 9">更多<i
                                class="el-icon-arrow-right"></i></span></p>
                    <div class="name">
                        <span class="line1" @click="getCate2(item.id)" :class="{ active: item.id == cate_id }"
                            v-show="index < 9" v-for="(item, index) in cate" :key="item.id">
                            {{ item.name }}
                        </span>
                    </div>
                </div>
                <div class="chose">
                    <p>所属部门<span @click="more = '所属部门'" v-if="dept.length > 9">更多<i
                                class="el-icon-arrow-right"></i></span></p>
                    <div class="name">
                        <span class="line1" @click="getDept2(item.id)" :class="{ active: item.id == dept_id }"
                            v-show="index < 9" v-for="(item, index) in dept" :key="item.id">
                            {{ item.name }}
                        </span>
                    </div>
                </div>
                <div class="more" v-if="more">
                    <div class="topTile" @click="more = ''">
                        <i class="el-icon-arrow-left"></i><span>{{ more }}</span>
                    </div>
                    <div class="name" v-if="more == '工作地点'">
                        <span class="line1" @click="getPlace2(item.id)" :class="{ active: item.id == place_id }"
                            v-show="index < 9" v-for="(item, index) in place" :key="item.id">
                            {{ item.name }}
                        </span>
                    </div>
                    <div class="name" v-if="more == '职能类型'">
                        <span class="line1" @click="getCate2(item.id)" :class="{ active: item.id == cate_id }"
                            v-show="index < 9" v-for="(item, index) in cate" :key="item.id">
                            {{ item.name }}
                        </span>
                    </div>
                    <div class="name" v-if="more == '所属部门'">
                        <span class="line1" @click="getDept2(item.id)" :class="{ active: item.id == dept_id }"
                            v-show="index < 9" v-for="(item, index) in dept" :key="item.id">
                            {{ item.name }}
                        </span>
                    </div>
                </div>
                <div class="btn">
                    <button @click="drawer = false">确定</button>
                    <button @click="resetList">重置</button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import navTop from "./components/navTop.vue"

export default {
    components: {
        navTop
    },
    data() {
        return {
            drawer: false,
            place: [],
            cate: [],
            dept: [],
            place_id: '',
            cate_id: '',
            dept_id: '',
            list: [],
            totalPage: 1,
            pageNum: 1,
            currentPage: 1,
            loading: false,
            total: 0,
            keywords: '',
            aid: '',
            more: ''
        }
    },
    computed: {
        scrWidth() {
            return this.$store.state.winWidth
        }
    },
    mounted() {
        let id = this.$route.query.id
        if (id) {
            this.cate_id = parseInt(id)
        }
        this.getList()
        this.getSelect()
        window.addEventListener('scroll', this.handleScroll);
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
        goPage(url, id) {
            console.log(url, id);

            this.$router.push({
                path: url, query: {
                    id
                }
            })
        },
        getCate(e) {
            this.cate_id = e
            this.reqList()
        },
        getPlace(e) {
            console.log(e, '111')
            this.place_id = e
            this.reqList()
        },
        getDept(e) {
            this.dept_id = e
            this.reqList()
        },
        getCate2(e) {
            if (this.cate_id == e) {
                this.cate_id = ''

            } else {
                this.cate_id = e

            }
            this.reqList()
        },
        getPlace2(e) {
            if (this.place_id == e) {
                this.place_id = ''
            } else {
                this.place_id = e

            }
            this.reqList()
        },
        getDept2(e) {
            if (this.dept_id == e) {
                this.dept_id = ''
            } else {
                this.dept_id = e

            }
            this.reqList()
        },
        reqList() {
            this.list = []
            this.pageNum = 1
            this.getList()
        },
        getSelect() {
            this.$api.getJobChose({
            }).then(res => {
                if (res.code == 1) {
                    this.place = res.data.place
                    this.dept = res.data.dept
                    this.cate = res.data.cate
                }
            })
        },
        getChange(e) {
            this.list = []
            this.currentPage = e
            this.getList()
        },
        onloadBot() {
            if (this.loading || this.pageNum > this.totalPage) return;
            this.getList(1)
        },
        handleScroll() {
            if (this.scrWidth > 768) return
            // 滚动到底部时加载更多
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

            // 距离底部100px时加载
            if (scrollTop + windowHeight >= scrollHeight - 100 && !this.loading) {
                this.onloadBot()
            }
        },
        resetList() {
            this.pageNum = 1;
            this.place_id = ''
            this.dept_id = ''
            this.cate_id = ''
            this.list = [];
            this.getList();
        },
        getHref(route) {
            const resolved = this.$router.resolve(route);
            return resolved.href;
        },
        getList(ad) {
            this.loading = true
            this.$api.getJobList({
                page: ad ? this.pageNum : this.currentPage,
                keywords: this.keywords,
                cate_id: this.cate_id,
                dept_id: this.dept_id,
                place_id: this.place_id
            }).then(res => {
                if (res.code == 1) {
                    this.totalPage = res.data.last_page
                    this.total = res.data.total
                    this.list = this.list.concat(res.data.data);
                    this.loading = false
                    this.pageNum++;
                }

            })
        },

    }
}
</script>

<style lang="scss" scoped>
.main {
    background: rgba(131, 130, 130, 0.1);

    .cont {
        padding: 20px 350px;
        min-height: calc(100vh - 72px);

        .top {
            padding: 20px 40px 40px;
            background-color: #fff;

            >span {
                font-size: 18px;
                display: block;
                margin-bottom: 20px;
            }

            .search {
                background-color: black;
                color: #fff;
                border-radius: 0;
            }

            .select {
                margin-top: 20px;
            }
        }

        .bottom {
            margin-top: 15px;

            .info {
                display: block;
                cursor: pointer;
                padding: 30px 40px 0;
                background-color: #fff;
                color: #121316;
                text-decoration: none;

                &:hover {
                    background-color: #eeeded;
                }

                &:last-child {
                    .state {
                        border: none;
                    }
                }

                .title {
                    font-size: 18px;

                    .ug {
                        background-color: #ff6b6b;
                        padding: 3px 5px;
                        color: #fff;
                        font-size: 18px;
                        margin-right: 10px;
                    }

                }

                .type {
                    color: #f3f3f3;

                    >span {
                        color: #b1afaf;

                        padding: 15px;
                        display: inline-block;
                        font-size: 16px;

                        &:first-child {
                            padding-left: 0;
                        }
                    }
                }

                .state {
                    color: #504f4f;
                    display: flex;
                    justify-content: space-between;
                    padding: 0 0 25px;
                    border-bottom: 1px solid #d1cfcf;

                    span {
                        font-size: 16px;

                        &:nth-child(2) {
                            font-size: 14px;
                        }
                    }
                }
            }
        }

        .pagination {
            padding: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

@media screen and (min-width:769px) {
    ::v-deep .el-input-group__append {
        left: 10px;
        background-color: #fff;
        padding: 0 10px;

        .sx {
            display: none;

            span {
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #464545;

                img {
                    width: 15px;
                    height: 15px;
                    margin-left: 5px;
                }
            }
        }
    }
}

@media screen and (max-width:768px) {
    .main {
        .cont {
            width: 100%;
            padding: 0;

            .top {
                background-color: transparent;
                padding: 10px 20px;

                >span {
                    display: none;
                }

                .select {
                    display: none;
                }

                ::v-deep .el-input__inner {
                    font-size: 14px;
                    height: 33px;
                    line-height: 33px;
                    padding: 0 15px;

                }

                ::v-deep .el-input-group__append {
                    left: 10px;
                    background-color: #fff;
                    padding: 0 10px;

                    .search {
                        display: none;
                    }

                    .sx {
                        span {
                            display: flex;
                            align-items: center;
                            font-size: 14px;
                            color: #464545;

                            img {
                                width: 15px;
                                height: 15px;
                                margin-left: 5px;
                            }
                        }
                    }
                }
            }

            .bottom {
                .info {
                    padding: 10px 20px;

                    .title {
                        font-size: 16px;

                        .ug {
                            font-size: 12px;
                            padding: 2px 6px;
                            margin-right: 5px;
                            border-radius: 5px;
                        }
                    }

                    .type {
                        color: #504f4f;
                        margin-top: 15px;
                        font-size: 14px;

                        span {
                            font-size: 14px;
                        }
                    }

                    .state {
                        flex-direction: column;
                        padding-bottom: 15px;

                        span {
                            font-size: 14px;

                            &:nth-child(2) {
                                font-size: 12px;
                            }
                        }

                        border-bottom: 5px solid #f3f3f3;
                    }
                }
            }
        }
    }

    .drawer {
        position: relative;
        height: 100%;

        .btn {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: right;

            >button {
                width: 50%;
                line-height: 50px;
                font-size: 17px;
                font-family: HiraginoSansGB-W6;
                font-weight: bolder;
                border-color: transparent;
                color: #ff6b6b;
                background-color: #fae0e0;
                box-sizing: border-box;

                &:nth-child(2) {
                    background-color: #89909e;
                    color: #fff;
                }
            }
        }

        .chose {
            border-bottom: 5px solid #f3f3f3;
            padding-bottom: 10px;

            >p {
                margin: 0;
                padding: 15px 12px;
                line-height: 23px;
                font-size: 15px;
                font-family: HiraginoSansGB-W6;
                font-weight: bolder;
                color: #121316;
                position: relative;

                span {
                    position: absolute;
                    right: 15px;
                    font-weight: normal;
                    font-size: 14px;
                    color: #504f4f;
                }
            }

            .name {
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                >span {
                    display: block;
                    width: calc(100% / 3 - 24px);
                    text-align: center;
                    margin: 8px 12px;
                    padding: 0 6px;
                    line-height: 32px;
                    height: 32px;
                    background-color: #f4f4f5;
                    font-size: 14px;
                    color: #504f4f;
                }

                .active {
                    background-color: #fae0e0;
                    color: #ff6b6b;
                }
            }
        }

        .more {
            position: absolute;
            top: 0;
            left: 0;

            z-index: 2;
            background-color: #fff;
            width: 100%;
            height: 100%;

            .topTile {
                padding-left: 10px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #a09b9b;
                height: 13.021vw;

                i {
                    font-size: 16px;
                    font-weight: bolder;
                }

                >span {
                    font-size: 16px;
                    font-weight: bolder;
                    padding-left: 15px;
                    display: inline-block;
                }
            }

            .name {
                margin-top: 13px;

                span {
                    display: block;
                    padding: 8px 20px;
                    font-size: 14px;
                }

                .active {
                    background-color: #fae0e0;
                    color: #ff6b6b;
                }
            }
        }
    }
}
</style>